// 参考： https://github.com/ant-design/ant-design-mobile/blob/master/components/grid/style/index.less
// 原理： 伪元素 + transform 缩放
//       伪元素::after或::before是独立于当前元素，可以单独对其缩放而不影响元素本身的缩放
// less 中的mixins定义.big(@number) {}  scss中定义的mixins: @mixin big($number) {}
@mixin scale-hairline-common($color, $top, $right, $bottom, $left) {
	content: '';
	position: absolute;
	display: block;
	z-index: 1;
	top: $top;
	right: $right;
	bottom: $bottom;
	left: $left;
	background-color: $color;
}

@mixin hairline($direction, $color: #000, $radius: 0) {
	@if $direction == top {
		border-top: 1px solid $color;

		// min-resolution 用来检测设备的最小像素密度
		@media (min-resolution: 2dppx) {
			border-top: none;

			&::before {
				@include scale-hairline-common($color, 0, auto, auto, 0);
				width: 100%;
				height: 1px;
				transform-origin: 50% 50%;
				transform: scaleY(0.5);

				@media (min-resolution: 3dppx) {
					transform: scaleY(0.33);
				}
			}
		}
	} @else if $direction == right {
		border-right: 1px solid $color;

		@media (min-resolution: 2dppx) {
			border-right: none;

			&::after {
				@include scale-hairline-common($color, 0, 0, auto, auto);
				width: 1px;
				height: 100%;
				background: $color;
				transform-origin: 100% 50%;
				transform: scaleX(0.5);

				@media (min-resolution: 3dppx) {
					transform: scaleX(0.33);
				}
			}
		}
	} @else if $direction == bottom {
		border-bottom: 1px solid $color;

		@media (min-resolution: 2dppx) {
			border-bottom: none;

			&::after {
				@include scale-hairline-common($color, auto, auto, 0, 0);
				width: 100%;
				height: 1px;
				transform-origin: 50% 100%;
				transform: scaleY(0.5);

				@media (min-resolution: 3dppx) {
					transform: scaleY(0.33);
				}
			}
		}
	} @else if $direction == left {
		border-left: 1px solid $color;

		@media (min-resolution: 2dppx) {
			border-left: none;

			&::before {
				@include scale-hairline-common($color, 0, auto, auto, 0);
				width: 1px;
				height: 100%;
				transform-origin: 100% 50%;
				transform: scaleX(0.5);

				@media (min-resolution: 3dppx) {
					transform: scaleX(0.33);
				}
			}
		}
	} @else if $direction == all {
		border: 1px solid $color;
		border-radius: $radius;

		@media (min-resolution: 2dppx) {
			position: relative;
			border: none;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 200%;
				height: 200%;
				border: 1px solid $color;
				border-radius: $radius * 2;
				transform-origin: 0 0;
				transform: scale(0.5);
				box-sizing: border-box;
				pointer-events: none;
			}
		}
	}
}

@mixin hairline-remove($position: all) {
	@if $position == left {
		border-left: 0;
		&::before {
			display: none !important;
		}
	} @else if $position == right {
		border-right: 0;
		&::after {
			display: none !important;
		}
	} @else if $position == top {
		border-top: 0;
		&::before {
			display: none !important;
		}
	} @else if $position == bottom {
		border-bottom: 0;
		&::after {
			display: none !important;
		}
	} @else if $position == all {
		border: 0;
		&::before {
			display: none !important;
		}
		&::after {
			display: none !important;
		}
	}
}
